<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/6/2
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>抽取的公共的导航页面</title>
  </style>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
  <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>

<!--
            	描述：菜单栏
            -->
<div class="container-fluid">
  <div class="col-md-4">
    <img src="${pageContext.request.contextPath}/img/logo2.png" />
  </div>
  <div class="col-md-5">
    <img src="${pageContext.request.contextPath}/img/header.png" />
  </div>
  <div class="col-md-3" style="padding-top:20px">
    <%--加入判断--%>
    <c:if test="${empty user}">
      <ol class="list-inline">
        <li><a href="${pageContext.request.contextPath}/jsp/login.jsp">登录</a></li>
        <!--${pageContext.request.contextPath} 通过pageContext域对象获取request bean属性同时通过
						request对象获取contextPath这个bean属性,获取上下文路径
							等价于pageContext.getRequest().getcontextPath()
						  -->
        <li><a href="${pageContext.request.contextPath}/jsp/register.jsp">注册</a></li>
      </ol>
    </c:if>
    <c:if test="${not empty user}">

      <strong>欢迎,${user.name}</strong>
      <a href="${pageContext.request.contextPath}/order?methodName=getOrderByPage">【我的订单列表】</a>
      <a href="${pageContext.request.contextPath}/user?methodName=userLogout">【退出】</a>


    </c:if>

  </div>
</div>
<!--
    描述：导航条 nav 标签是boostrap提供的导航条组件
-->
<div class="container-fluid">
  <nav style="background-color: darkslategrey" class="navbar navbar-inverse">
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">首页</a>
      </div>


      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <%--ul标签--%>
        <ul class="nav navbar-nav" id="ulDaoHang">
         <%-- <li><a  class="daohang_a" href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
          <li><a  class="daohang_a" href="#">电脑办公</a></li>
          <li><a class="daohang_a" href="#">电脑办公</a></li>
          <li><a class="daohang_a" href="#">电脑办公</a></li>--%>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>

      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</div>
</body>

<script>
  $(function(){
      //页面载入事件
   // alert("触发页面载入事件") ;


    //获取id="ulDaoHang"Jq标签对象
    var ul = $("#ulDaoHang") ;

    //发送ajax
    $.ajax({
        url:"${pageContext.request.contextPath}/category?methodName=getAllCategories",
        type:"get",
        success:function(data){ //data,服务器响应来的json数据


          /**
           * {"code":0,"data":[{"cid":"1","cname":"手机数码"},{"cid":"2","cname":"电脑办公"},{"cid":"3","cname":"家具家居"},{"cid":"4","cname":"鞋靴箱包"},{"cid":"5","cname":"图书音像"},{"cid":"6","cname":"母婴孕婴"},{"cid":"7","cname":"运动户外"},{"cid":"8","cname":"aaaa"},{"cid":"9","cname":"汽车用品"}]}
           */
          if(data.code==0){
            //遍历数据 data.data
            //alert(this.data.cname) ;
            //Jquery的each
            $(data.data).each(function(){ //each的jq的方法
              // alert(this.cname) ;

              //Jq的里面文档处理的方法:使用jq对象给标签里面追加内容
              //jq对象.append(标签体内容)
              ul.append("<li><a  class='daohang_a' href='${pageContext.request.contextPath}/product?methodName=getProductByPage&cid="+this.cid+"'>"+this.cname+"<span class='sr-only'>(current)</span></a></li>") ;
            })
          }

        },
      dataType:"json"  //服务器响应过来的数据格式

    }) ;


  }) ;
</script>
</html>
